{extend name="default/layout" /}

{block name="content"}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

    <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">

        <!-- 侧边栏导航 -->
        {assign name="current" value="sign" /}
        {include file="default/components/user-sidebar" /}

        <!-- 主要内容区域 -->
        <div class="lg:col-span-3 space-y-4">

            <!-- 签到状态卡片 -->
            <div class="bg-white rounded-lg p-4"
                 data-today-signed="{$sign_data.today_signed|default=0}"
                 data-continuous-days="{$sign_data.continuous_days|default=0}"
                 data-today-points="{$sign_data.today_points|default=5}"
                 data-month="{$sign_data.month|default=''}">
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
                            <i class="fas fa-calendar-check text-blue-500 text-lg"></i>
                        </div>
                        <div>
                            <h2 class="text-lg font-semibold text-gray-800">每日签到</h2>
                            {if $sign_data.today_signed}
                                <p class="text-green-600 text-sm">今日已签到 · 连续 <span id="continuous-days-display">{$sign_data.continuous_days}</span> 天</p>
                            {else}
                                <p class="text-orange-600 text-sm">今日未签到 · 连续 <span id="continuous-days-display">{$sign_data.continuous_days}</span> 天</p>
                            {/if}
                        </div>
                    </div>
                    <div class="text-right">
                        {if $sign_data.today_signed}
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800">
                                <i class="fas fa-check mr-1"></i>
                                已签到
                            </span>
                        {else}
                            <button onclick="doSign()" id="sign-btn" class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition-colors text-sm">
                                <i class="fas fa-pen mr-1"></i>
                                立即签到
                            </button>
                        {/if}
                    </div>
                </div>
            </div>

    <!-- 签到统计和日历 - 左右布局 -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
        <!-- 左侧：签到统计 -->
        <div class="bg-white rounded-sm p-6" id="sign-stats"
             data-total-days="{$sign_data.sign_stats.total_days|default=0}"
             data-month-days="{$sign_data.sign_stats.month_days|default=0}"
             data-total-points="{$sign_data.sign_stats.total_points|default=0}"
             data-month-points="{$sign_data.sign_stats.month_points|default=0}">
            <h2 class="text-xl font-semibold text-gray-800 mb-4">签到统计</h2>
            <div class="grid grid-cols-3 gap-4 text-center">
                <div>
                    <div class="w-12 h-12 bg-blue-100 rounded-sm flex items-center justify-center mx-auto mb-2">
                        <i class="fas fa-fire text-blue-500 text-xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800" id="continuous-days-count">{$sign_data.continuous_days|default=0}</h3>
                    <p class="text-gray-500 text-xs">连续签到</p>
                </div>
                <div>
                    <div class="w-12 h-12 bg-green-100 rounded-sm flex items-center justify-center mx-auto mb-2">
                        <i class="fas fa-calendar text-green-500 text-xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800" id="month-sign-count">{$sign_data.sign_stats.month_days|default=0}</h3>
                    <p class="text-gray-500 text-xs">本月签到</p>
                </div>
                <div>
                    <div class="w-12 h-12 bg-yellow-100 rounded-sm flex items-center justify-center mx-auto mb-2">
                        <i class="fas fa-coins text-yellow-500 text-xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800" id="today-points">{$sign_data.today_points|default=5}</h3>
                    <p class="text-gray-500 text-xs">今日积分</p>
                </div>
            </div>
        </div>

        <!-- 右侧：签到日历 -->
        <div class="bg-white rounded-sm p-6">
            <h2 class="text-xl font-semibold text-gray-800 mb-4">本月签到日历</h2>
            <div class="grid grid-cols-7 gap-2" id="calendar-grid">
                <!-- 星期标题 -->
                <div class="text-center py-2 text-gray-500 text-sm font-medium">日</div>
                <div class="text-center py-2 text-gray-500 text-sm font-medium">一</div>
                <div class="text-center py-2 text-gray-500 text-sm font-medium">二</div>
                <div class="text-center py-2 text-gray-500 text-sm font-medium">三</div>
                <div class="text-center py-2 text-gray-500 text-sm font-medium">四</div>
                <div class="text-center py-2 text-gray-500 text-sm font-medium">五</div>
                <div class="text-center py-2 text-gray-500 text-sm font-medium">六</div>

                <!-- 日期格子 -->
                <div id="calendar-grid" class="contents">
                    <!-- 通过JavaScript动态生成 -->
                </div>
            </div>
        </div>
    </div>

    <!-- 签到规则数据 (隐藏的数据容器) -->
    <div id="sign-rules-data" style="display: none;">
        {volist name="sign_data.sign_rules" id="rule"}
        <div class="sign-rule" data-day="{$rule.day}" data-points="{$rule.points}" data-description="{$rule.description|default=''}" data-is-bonus="{$rule.is_bonus|default=0}"></div>
        {/volist}
    </div>

    <!-- 签到日历数据 (隐藏的数据容器) -->
    <div id="calendar-data" style="display: none;">
        {volist name="sign_data.calendar_data" id="day"}
        <div class="calendar-day" data-date="{$day.date|default=''}" data-day="{$day.day|default=''}" data-signed="{$day.signed|default=0}" data-is-today="{$day.is_today|default=0}"></div>
        {/volist}
    </div>

    <!-- 签到奖励规则 -->
    <div class="bg-white rounded-sm p-6  mb-8">
        <h2 class="text-xl font-semibold text-gray-800 mb-4">签到奖励规则</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <h3 class="font-medium text-gray-800 mb-3">连续签到奖励</h3>
                <div class="space-y-3">
                    {volist name="sign_data.sign_rules" id="rule"}
                    <div class="flex justify-between items-center py-2 px-3 bg-gray-50 rounded-lg">
                        <span class="text-gray-600">连续签到 {$rule.day} 天</span>
                        <span class="font-medium text-green-600">+{$rule.points} 积分</span>
                    </div>
                    {/volist}
                </div>
            </div>
            <div>
                <h3 class="font-medium text-gray-800 mb-3">签到说明</h3>
                <ul class="space-y-2 text-gray-500 text-sm mb-4">
                    <li><i class="fas fa-info-circle text-blue-500 mr-2"></i>用户每日可签到一次，获取相应积分</li>
                    <li><i class="fas fa-info-circle text-blue-500 mr-2"></i>连续签到天数越多，获得的积分越多</li>
                    <li><i class="fas fa-info-circle text-blue-500 mr-2"></i>中断签到将重置连续签到天数</li>
                    <li><i class="fas fa-info-circle text-blue-500 mr-2"></i>连续签到超过7天后重新计算连续天数</li>
                </ul>

                <h3 class="font-medium text-gray-800 mb-3">积分用途</h3>
                <div class="grid grid-cols-2 gap-3">
                    <div class="text-center p-3 border border-gray-200 rounded-sm">
                        <div class="w-8 h-8 bg-purple-100 rounded-sm flex items-center justify-center mx-auto mb-2">
                            <i class="fas fa-shopping-cart text-purple-500 text-sm"></i>
                        </div>
                        <h4 class="font-medium text-gray-800 text-sm mb-1">商品兑换</h4>
                        <p class="text-gray-500 text-xs">使用积分兑换商品</p>
                    </div>

                    <div class="text-center p-3 border border-gray-200 rounded-sm">
                        <div class="w-8 h-8 bg-red-100 rounded-sm flex items-center justify-center mx-auto mb-2">
                            <i class="fas fa-percentage text-red-500 text-sm"></i>
                        </div>
                        <h4 class="font-medium text-gray-800 text-sm mb-1">优惠券</h4>
                        <p class="text-gray-500 text-xs">兑换购物优惠券</p>
                    </div>

                    <div class="text-center p-3 border border-gray-200 rounded-sm">
                        <div class="w-8 h-8 bg-green-100 rounded-sm flex items-center justify-center mx-auto mb-2">
                            <i class="fas fa-crown text-green-500 text-sm"></i>
                        </div>
                        <h4 class="font-medium text-gray-800 text-sm mb-1">VIP体验</h4>
                        <p class="text-gray-500 text-xs">兑换VIP体验卡</p>
                    </div>

                    <div class="text-center p-3 border border-gray-200 rounded-sm">
                        <div class="w-8 h-8 bg-blue-100 rounded-sm flex items-center justify-center mx-auto mb-2">
                            <i class="fas fa-gift text-blue-500 text-sm"></i>
                        </div>
                        <h4 class="font-medium text-gray-800 text-sm mb-1">抽奖机会</h4>
                        <p class="text-gray-500 text-xs">参与积分抽奖</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="js"}
<!-- 引入外部JS文件 -->
<script src="/static/default/js/user/sign.js?v={$static_version}"></script>

<!-- 页面初始化 -->
<script>
$(document).ready(function() {
    // 初始化签到页面
    if (typeof SignManager !== 'undefined') {
        // 从DOM节点获取数据，而不是依赖json_encode
        SignManager.initFromDOM();
    }
});
</script>


{/block}
